$(function(){
        $('#ping1Box1').find('img').show().animate({
            width: '526px',
            height:'570px'
        }, 1500, 'easeOutExpo');
        $('#ping1Box2').find('img').show().animate({
            width: '456px',
            height:'350px'
        }, 1500, 'easeOutExpo');

    $('#dowebok').fullpage({
        sectionsColor: ['#212121', '#ffffff', '#212121', '#212121','#212121'],
        'navigation':true,
        'navigationColor':'',
        'navigationTooltips':['餐厅','超市','KTV','医院','酒店'],
        afterLoad: function(anchorLink, index){/*................进入第index屏之后，发生的事件...*/
            if(index == 1){
                $('#ping1Box1').find('img').show().animate({
                    width: '526px',
                    height:'570px'
                }, 1500, 'easeOutExpo');
                $('#ping1Box2').find('img').show().animate({
                    width: '456px',
                    height:'350px'
                }, 1500, 'easeOutExpo');
             }
            if(index == 2){
                $('.img').delay(0).animate({
                    top: '-20%'
                }, 800);
                $('.img1').delay(500).animate({
                    right:'17%'
                }, 800);
                $('.img2').delay(700).animate({
                    top:'-32%'
                }, 800);
                $('.img3').delay(900).animate({
                    top:'-22%'
                }, 800);
            }
            if(index == 3){
                $('#ping3Box1').delay(100).animate({
                    left:'200px'
                },1000);
                $('#ping3Box2').find('div').delay(100).css({
                    'webkitTransform':'rotate(720deg)',
                    'webkitTransition':'all 1s'
                })
            }
            if(index == 4){
                $('#ping4Box1').show().animate({
                    top:'150px'
                },1000);
                $('#ping4Box2').show().animate({
                    top:'50px'
                },1000);
            }
            if(index == 5){
                $('#ping5Box1').find('div').eq(0).show(500).animate({
                    left:'50px',
                    bottom:'25px'
                },1000);
                $('#ping5Box1').find('div').eq(1).delay(500).show(1000);
                $('#ping5Box1').find('div').eq(2).delay(1000).show(1000);
                $('#ping5Box2').find('div').delay(1500).show(100).animate({
                    left:'200px'
                },1500)
            }
        },
        onLeave: function(index, direction){/*................离开第index屏之后，发生的事件....*/
            if(index=='1'){
                 $('#ping1Box1').find('img').animate({
                     width: '50px',
                     height:'50px'
                 }, 1000, 'easeOutExpo').hide(100);
                 $('#ping1Box2').find('img').animate({
                     width: '50px',
                     height:'50px'
                 }, 1000, 'easeOutExpo').hide(100);
            }
            if(index == '2'){
                $('.img').delay(0).animate({
                    top: '50%'
                }, 1000);
                $('.img1').delay(0).animate({
                    right:'-8%'
                }, 1000);
                $('.img2').delay(0).animate({
                    top:'-110%'
                }, 1000);
                $('.img3').delay(0).animate({
                    top:'50%'
                }, 1000);
            }
            if(index == '3'){
                $('#ping3Box1').delay(0).animate({
                    left:'-560px'
                },1000);
                $('#ping3Box2').find('div').delay(0).css({
                    'webkitTransform':'rotate(-720deg)',
                    'webkitTransition':'all 1s'
                })
            }
            if(index == '4'){
                $('#ping4Box1').animate({
                    top:'-420px'
                },1000).hide(100);
                $('#ping4Box2').animate({
                    top:'550px'
                },1000).hide(100);
            }
            if(index == '5'){
                $('#ping5Box1').find('div').eq(0).animate({
                    left:'0',
                    bottom:'25px'
                },1000).hide(100);
                $('#ping5Box1').find('div').eq(1).delay(500).hide(100);
                $('#ping5Box1').find('div').eq(2).delay(1000).hide(1000);
                $('#ping5Box2').find('div').delay(1500).animate({
                    left:'0'
                },100).hide(100)
            }
        }
    });
});
